<template>
  <div v-loading="formLoading" class="order-detail-content">
    <el-button type="success" size="mini" class="back-btn" @click="$router.go(-1)">返回</el-button>
    <el-steps :active="parseInt(feedbackForm.status)" finish-status="success" process-status="success" simple align-center>
      <el-step title="新建" />
      <el-step title="已受理" />
      <el-step title="已处理" />
      <el-step title="已确认" />
    </el-steps>
    <el-row>
      <el-col :span="11">
        <div class="detail-data-content">
          <!--<div v-show="isHandle" class="detail-data-item">-->
          <div class="detail-data-btn">
            <div class="cus-title" style="margin-left: 0;">用户反馈</div>
            <span>
              <el-button v-if="user.fid === feedbackForm.createId" :loading="deleteFeedbackBtnLoading" type="text" @click="deleteFeedback">删除反馈</el-button>
              <el-button v-if="handleFeedbackBtn" :loading="handleBtnLoading" type="text" @click="handleFeedback">{{ btnName[feedbackForm.status] }}</el-button>
            </span>
          </div>
          <div class="order-detail-data">
            <span>反馈标题：</span><span>{{ feedbackForm.title }}</span>
          </div>
          <div class="detail-data">
            <div class="detail-data-item"><span>提交时间：</span><span>{{ feedbackForm.createTime | dateFilter('yyyy-mm-dd hh:mm:ss') }}</span></div>
            <div class="detail-data-item"><span>反馈编码：</span><span>{{ feedbackForm.feedbackCode }}</span></div>
            <div class="detail-data-item"><span>反馈状态：</span><span>{{ feedbackForm.status | status }}</span></div>
          </div>
          <div class="order-detail-data">
            <span>反馈内容：</span>
            <span>{{ feedbackForm.content }}</span>
          </div>
          <div v-if="feedbackForm.fileIds" class="order-detail-data">
            <span>附件：</span>
            <!--<span><img style="height:200px" :src="feedbackForm.attachment" /></span>-->
            <span>
              <el-image
                v-for="url in filesUrl"
                :key="url"
                class="image-size"
                fit="contain"
                :src="url"
                :preview-src-list="filesUrl"
              />
            </span>
          </div>
        </div>
      </el-col>
      <el-col :span="12" class="message-wrap">
        <el-row class="communicate-record">
          <el-col :span="12">
            <div class="cus-title">沟通记录</div>
          </el-col>
          <el-col :span="12" class="leavemsg">
            <el-button type="text" @click="leaveMsg()">留言</el-button>
          </el-col>
        </el-row>
        <div class="message-container">
          <el-scrollbar style="height: calc(100vh - 240px);">
            <el-timeline v-loading="Loading" style="padding-right: 20px;">
              <el-timeline-item v-for="order in mesList" :key="order.messgeId" :timestamp="order.createTime | dateFilter('yyyy-mm-dd hh:mm:ss')" placement="top">
                <el-card>
                  <div class="communicate-content">{{ order.content }}</div>
                  <div class="communicate-person">
                    <span>留言人员：</span>
                    <span>{{ order.userName }}</span>
                    <!--<el-button v-if="$store.state.user.usercode === order.userid" type="danger" circle class="leave-mes-del" icon="el-icon-delete" :loading="deleteMesBtnLoading" @click="delMessage(order)" />-->
                  </div>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </el-scrollbar>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { parseTime } from '@/utils/common'
import { addFeedbackMes, listFeedbackMes, delFeedback, updateFeedback, getFeedbackgetInfo } from '@/api/baseManage/feedback'
export default {
  name: 'FeedbackDetail',
  filters: {
    status(value) {
      const statusObj = {
        0: '新建',
        1: '已受理',
        2: '已处理',
        3: '已确认',
        4: '关闭'
      }
      return statusObj[value]
    }
  },
  data() {
    return {
      value: 5,
      radio: '1',
      orderId: '',
      feedbackForm: {},
      filesUrl: [],
      formLoading: false,
      handleBtnLoading: false,
      deleteFeedbackBtnLoading: false,
      deleteMesBtnLoading: false,
      btnName: ['受理反馈', '处理反馈', '确认反馈'],
      mesList: [],
      Loading: false,
      user: this.$store.state.user.user,
      isHandle: true
    }
  },
  computed: {
    /**
       * 处理反馈按钮控制
       */
    handleFeedbackBtn() {
      if (this.feedbackForm.status < 2 && this.user.fid !== this.feedbackForm.createId) {
        return true
      } else if (this.feedbackForm.status === 2) {
        if (this.user.fid === this.feedbackForm.createId) {
          return true
        }
      }
      return false
    }
  },
  mounted() { // 初始化
    this.feedbackForm = this.$route.query.form
    this.isHandle = this.$route.query.form.isHandle
    if (this.feedbackForm.fileIds) {
      this.filesUrl = this.feedbackForm.fileIds.split(',').map(id => process.env.VUE_APP_BASE_API + '/file/download?fileKey=' + id)
    }
    this.listFeedbackMes()
  },

  methods: {
    delMessage(message) {
      this.$confirm(`确定要删除发表时间为 ${parseTime(message.createtime, '{y}-{m}-{d} {h}:{i}')} 的反馈留言？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteMesBtnLoading = true
        this.request({
          url: `/order/deleteMes/${message.id}`,
          method: 'post'
        }).then(response => {
          this.getFeedbackDetail()
          this.$message({
            message: '反馈留言删除成功。',
            type: 'success'
          })
          this.deleteMesBtnLoading = false
        }).catch(() => {
          this.deleteMesBtnLoading = false
        })
      }).catch(() => {
      })
    },
    deleteFeedback() {
      this.$confirm(`确定要删除反馈：${this.feedbackForm.title} ！`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteFeedbackBtnLoading = true
        return delFeedback([this.feedbackForm.feedbackId])
      }).then(() => {
        this.msgSuccess('删除成功')
        this.$router.go(-1)
        this.deleteFeedbackBtnLoading = false
      }).catch(() => {
        this.deleteFeedbackBtnLoading = false
      })
    },
    /**
     * 获取反馈详情
     */
    getFeedbackDetail() {
      this.formLoading = true
      getFeedbackgetInfo(this.feedbackForm.feedbackId).then(response => {
        this.feedbackForm = response.data
        this.formLoading = false
      }).catch(() => {
        this.formLoading = false
      })
    },
    /**
       * 处理反馈
       */
    handleFeedback() {
      this.$confirm(`确定要${this.btnName[this.feedbackForm.status]}：${this.feedbackForm.title} ！`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.handleBtnLoading = true
        updateFeedback({
          feedbackId: this.feedbackForm.feedbackId,
          status: parseInt(this.feedbackForm.status) + 1
        }).then(response => {
          this.handleBtnLoading = false
          this.getFeedbackDetail()
        }).catch(() => {
          this.handleBtnLoading = false
        })
      }).catch(() => {})
    },
    // 留言列表
    listFeedbackMes() {
      this.Loading = true
      listFeedbackMes(this.feedbackForm.feedbackId).then(response => {
        this.mesList = response.data
        this.Loading = false
      }).catch(() => {
        this.Loading = false
      })
    },

    /**
       * 反馈留言
       */
    leaveMsg() {
      function inputValidator(val) {
        if (val.length > 999) {
          return '输入文本长度不能超过1000字符。'
        } else {
          return true
        }
      }
      this.$prompt('', '反馈留言', {
        inputType: 'textarea',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        closeOnClickModal: false,
        inputValidator: inputValidator,
        inputErrorMessage: ''
      }).then(({ value }) => {
        this.formLoading = true
        addFeedbackMes({
          feedbackId: this.feedbackForm.feedbackId,
          content: value
        }).then(response => {
          this.formLoading = false
          this.listFeedbackMes()
        }).catch(() => {
          this.formLoading = false
        })
      }).catch(() => {})
    }

  }
}
</script>

<style scoped lang="scss">
  .order-detail-content{
    padding: 20px 0px 20px 20px;
    position: relative;
    .el-steps{
      background:white;
    }
    .back-btn{
      position: absolute;
      top: 30px;
      right: 40px;
    }
    .detail-data-content{
      padding:10px;
      background:white;
      font-size:14px;
      .detail-data {
        display: flex;
        justify-content: space-between;
        height: 40px;
        line-height: 40px;
      }
      .detail-data-btn{
        display: flex;
        justify-content: space-between;
      }
      .detail-data-item {
        span:nth-child(1) {
          color: #606266;
        }
      }
      .order-detail-data{
        display: flex;
        line-height: 24px;
        margin-top: 10px;
        span:nth-child(1) {
          white-space: nowrap;
          color: #606266;
        }
        .textarea-disable {
          width: 75%;
        }
        .image-size {
          width: 200px;
          height: 200px;
          margin:0 10px 10px 0;
          /deep/ .el-icon-circle-close {
            background-image: linear-gradient(to right,#2ce6c9,#00baff);
            -webkit-background-clip:text;
            color: transparent;
          }
        }
      }
    }
    .communicate-record{
      display: flex;
      background: white;
      margin-bottom:20px;
      &>div:nth-child(1) {
        padding-right: 50px;
      }
    }
    .message-wrap {
      margin-left: 30px;
      border-left: 1px solid #E4E7ED;
      padding-left: 20px;
    }
    .mes-btn{
      float:right;
      margin-right:20px;
    }
    .communicate-content{
      padding: 0 50px 14px 0;
      line-height: 22px;
      word-wrap: break-word;
    }
    .communicate-person {
      position: relative;
      span:nth-child(1) {
        color: #606266;
      }
      .leave-mes-del{
        cursor: pointer;
        position: absolute;
        right: 0;
        top: -20px;
      }
    }
    .cus-title{
      display: flex;
      align-items: center;
      margin:10px 20px;
      &:before{
        content: '';
        display: inline-block;
        width: 4px;
        height: 30px;
        line-height: 30px;
        margin-right: 10px;
        background-color: #409EFF;
      }
    }
  }
  .leavemsg{
    text-align: right;
    padding-right:10px;
  }
</style>
<style lang="scss">
  .message-container {
    .el-scrollbar .el-scrollbar__wrap {
      overflow-x: hidden;
    }
  }
</style>
